import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';


import Config from '../../config';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import BaseItem from '../common/BaseItem';

export default class QZ_ChatMemberItemView extends BaseItem {
    render() {
        return (         
            <View underlayColor="#eeeeee"
              style={{backgroundColor:"#ffffff",
              width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
              paddingLeft:SizeUtils.translateDesignWidthToCode(40),
              paddingRight:SizeUtils.translateDesignWidthToCode(40),
              paddingTop:SizeUtils.translateDesignHeightToCode(32),
              paddingBottom:SizeUtils.translateDesignHeightToCode(60),
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
              borderColor:"#eeeeee",
                }}>
                {this._renderAvatarContent(this.props.data)}
            </View>
        );
    }

    _renderAvatarContent(data) {
        return (
          <View style={{
              width:SizeUtils.translateDesignWidthToCode(120),
              alignItems:"center",
              height:SizeUtils.translateDesignHeightToCode(90) }}>
            {this._renderAvatarImage(data)}
            <View style={{
              marginTop: SizeUtils.translateDesignHeightToCode(10),
              height: SizeUtils.translateDesignHeightToCode(32),
              overflow: 'hidden'
            }}
            >
              <Text
                style={{ 
                  color: '#333333',
                  fontSize: SizeUtils.translateFontSizeToCode(24),
                  textAlign: 'center',
                }}
              >{ data.name }</Text>
            </View>
            
          </View>
        )
     
    }

    _renderAvatarImage(data){
      if(data.avatar) {
        return (<TImage style={{
              width: 88,
              height: 88,
              borderRadius: 88,
              borderWidth: 1, borderColor: '#cccccc',
              overflow: 'hidden',
            }}
            source={{uri:data.avatar}}
            />)
      }

      return (<TImage style={{
              width: 88,
              height: 88,
              borderRadius: 88,
              borderWidth: 1, borderColor: '#cccccc',
              overflow: 'hidden',
            }} source={require("../../../resource/images/common/avatar.png")} />)
    }



}
